---
title: Use with Waku - Flowbite React
description: Learn how to install Flowbite React with Waku
---

This guide provides three ways to integrate Flowbite React with Waku:

1. [Quick Start](#quick-start): Create a new project with everything pre-configured
2. [Add to Existing Project](#add-to-existing-project): Add Flowbite React to an existing Waku project
3. [Manual Setup](#manual-setup): Set up everything from scratch manually

<TextDivider>Quick Start (Recommended)</TextDivider>

## Quick Start

The fastest way to get started is using our project creation CLI, which sets up a new Waku project with Flowbite React, Tailwind CSS, and all necessary configurations:

```bash
npx create-flowbite-react@latest -t waku
```

This will:

- Create a new Waku project
- Install and configure Tailwind CSS
- Set up Flowbite React with all required dependencies
- Configure dark mode support
- Set up example components

<TextDivider>Add to Existing Project</TextDivider>

## Add to Existing Project

If you already have a Waku project and want to add Flowbite React, you can use our initialization CLI:

```bash
npx flowbite-react@latest init
```

This will automatically:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Set up necessary configurations

<TextDivider>Manual Setup</TextDivider>

## Manual Setup

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

### 1. Create Project

Create a new Waku project:

```bash
npx create-waku@latest
```

### 2. Create Vite Config

Create a `vite.config.ts` file in the root of your project:

```ts
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [],
});
```

### 3. Install Flowbite React

Install Flowbite React:

```bash
npx flowbite-react@latest init
```

This will:

- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Configure Vite to include Flowbite React plugin

## Try it out

Now that you have successfully installed Flowbite React you can start using the components from the library. Remember that Waku uses React Server Components by default, so you'll need to add the 'use client' directive to use interactive components:

```tsx
// src/pages/index.tsx
import { Button } from "flowbite-react";

export default async function HomePage() {
  return (
    <>
      <Button>Click me</Button>
    </>
  );
}
```

<hr />

## Templates

- [Github](https://github.com/themesberg/flowbite-react-template-waku)
- [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-waku)
